<template>
  <div class="chart-box">
    <div class="head">
      <div class="line-box">
        <div class="line"></div>
        <div class="line-content">意向客户转化漏斗分析</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="box-main">
      <a-spin :spinning="spinning">
        <div
          v-show="dataList.length"
          class="chart-content"
          id="CustomerConvert-Business"
        ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="!dataList.length"
        />
      </a-spin>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  computed,
  watch,
  onMounted,
  reactive,
  toRefs,
  onUnmounted,
  ref,
  nextTick,
} from "vue";
import { Chart } from "@antv/g2";
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import _ from "lodash";
import { Empty } from "ant-design-vue";
import DataSet from "@antv/data-set";
const { DataView } = DataSet;
export default defineComponent({
  name: "CustomerConvertChart",
  components: {
    Empty,
  },
  setup(props, context) {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    const state = reactive({
      spinning: false,
      chart: {},
      dataList: [],
    });

    const renderChart = () => {
      state.spinning = true;
      request
        .get("/org", "/business/customer/ways/status")
        .then((res) => {
          let data = res?.list || [];
          state.dataList = data;
          const sumTotal = data.reduce((total, obj) => total + obj.total, 0);
          state.spinning = false;
          nextTick(() => {
            const dv = new DataView().source(state.dataList);
            dv.transform({
              type: "map",
              callback(row) {
                row.percent = row.total / sumTotal;
                return row;
              },
            });
            const data = dv.rows;
            state.chart = new Chart({
              container: "CustomerConvert-Business",
              autoFit: true,
              height: 500,
              padding: [20, 120, 95],
            });
            state.chart.data(data);
            state.chart.axis(false);
            state.chart.tooltip({
              showTitle: false,
              showMarkers: false,
              itemTpl:
                '<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' +
                '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
                "{name}<br/>" +
                '<span style="padding-left: 16px;line-height: 16px;">客户数量：{total}</span><br/>' +
                '<span style="padding-left: 16px;line-height: 16px;">占比：{percent}</span><br/>' +
                "</li>",
            });
            state.chart.coordinate("rect").transpose().scale(1, -1);
            state.chart
              .interval()
              .adjust("symmetric")
              .position("status_txt*percent")
              .shape("funnel")
              .color("status_txt")
              .label(
                "status_txt*total",
                (status_txt, total) => {
                  return {
                    content: `${status_txt} ${total}`,
                  };
                },
                {
                  offset: 35,
                  labelLine: {
                    style: {
                      lineWidth: 1,
                      stroke: "rgba(0, 0, 0, 0.15)",
                    },
                  },
                }
              )
              .tooltip(
                "status_txt*total*percent",
                (status_txt, total, percent) => {
                  return {
                    name: status_txt,
                    percent: (percent * 100).toFixed(2) + "%",
                    total,
                  };
                }
              )
              .animate({
                appear: {
                  animation: "fade-in",
                },
                update: {
                  annotation: "fade-in",
                },
              });
            state.chart.interaction("element-active");
            state.chart.on("beforepaint", () => {
              state.chart.annotation().clear(true);
              const chartData = state.chart.getData();
              // 中间标签文本
              chartData.forEach((obj) => {
                state.chart.annotation().text({
                  top: true,
                  position: {
                    status_txt: obj.status_txt,
                    percent: "center",
                  },
                  content: (obj.percent * 100).toFixed(2) + "%", // 显示的文本内容
                  style: {
                    stroke: null,
                    fill: "#fff",
                    textAlign: "center",
                  },
                });
              });
            });
            state.chart.render();
          });
        })
        .catch((err) => {
          state.spinning = false;
        });
    };

    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    });

    return {
      ...toRefs(state),
      simpleImage,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  height: 600px;
  width: 100%;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.head {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 16px;
}
.box-main {
  flex: 1;
}

.line-box {
  display: flex;
  align-items: center;
  .line {
    width: 20px;
    height: 2px;
    background: @primary-color;
  }
  .line-content {
    padding: 0 6px;
    color: @primary-color;
  }
}
.chart-content {
  width: 100%;
  height: 100%;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>
